<template>
   <div class="app-container">
    <div class="container">
      <div class="container-left">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>最新考核分数</span>
          </div>
            <div class="consumption">
              <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/hou/lvhua.png"
                alt=""
              />
              <div>
                <div class="consumption-item-title">绿化养护服务</div>
                <div class="consumption-item-number">{{scoreData.lvhua}}</div>
              </div>
            </div>
              <div class="consumption-item">
                <img
                  class="consumption-item-img"
                  src="@/assets/images/hou/baojie.jpg"
                  alt=""
                />
                <div>
                  <div class="consumption-item-title">保洁服务</div>
                  <div class="consumption-item-number">{{scoreData.baojie}}</div>
                </div>
              </div>
            <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/hou/anbao.jpg"
                alt=""
              />
              <div>
                <div class="consumption-item-title">安保服务</div>
                <div class="consumption-item-number">{{scoreData.anbao}}</div>

              </div>
              </div>
                      <div class="consumption-item">
              <img
                class="consumption-item-img"
                src="@/assets/images/hou/zuixin.jpg"
                alt=""
              />
              <div>
                <div class="consumption-item-title">最新的考核总分</div>
                <div class="consumption-item-number">{{scoreData.total}}</div>

              </div>
              </div>
            </div>
        </el-card>
        <div class="container-left-middle">
          <div style="width: 32%">
            <el-card class="box-card">
              <div slot="header" class="card-title">
                <span>绿化养护服务考核月统计表</span>
                <div>
                  <el-date-picker v-model="leftMonth" format="yyyy年MM月" value-format="yyyy-MM" type="month" style="width: 140px" placeholder="" @change="getLvhuaData" :clearable="false">
                  </el-date-picker>
                </div>
                <div>
                  <el-button type="text"  icon="el-icon-download" size="mini" @click="rowExportLvhua()">导出</el-button>
                </div>
              </div>
              <el-table stripe border :data="lvhuaData" style="width: 100%" height="268px" max-height="268px">
                <el-table-column type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
                <el-table-column prop="big" label="考核大项"> </el-table-column>
                <el-table-column prop="total" label="扣分小计" width="100">
                  <template v-slot="{row}">
                    <span style="font-size: 16px;color: red;font-weight: bolder" v-if="row.total>0">{{row.total}}</span>
                    <span v-else>{{row.total}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
          <div style="width: 32%">
            <el-card class="box-card">
              <div slot="header" class="card-title">
                <span>保洁服务考核月统计表</span>
                <div>
                  <el-date-picker v-model="centerMonth" format="yyyy年MM月" value-format="yyyy-MM" type="month" style="width: 140px" placeholder="" @change="getLvhuaData" :clearable="false">
                  </el-date-picker>
                </div>
                <div>
                  <el-button type="text"  icon="el-icon-download" size="mini" @click="rowExportLvhua()">导出</el-button>
                </div>
              </div>
              <el-table stripe border :data="baojieData" style="width: 100%" height="268px" max-height="268px">
                <el-table-column type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
                <el-table-column prop="big" label="考核大项"> </el-table-column>
                <el-table-column prop="total" label="扣分小计" width="100">
                  <template v-slot="{row}">
                    <span style="font-size: 16px;color: red;font-weight: bolder" v-if="row.total>0">{{row.total}}</span>
                    <span v-else>{{row.total}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
          <div style="width: 32%">
            <el-card class="box-card" style="height: 100%">
              <div slot="header" class="card-title">
                <span>安保服务考核月统计表</span>
                <div>
                  <el-date-picker v-model="rightMonth" format="yyyy年MM月" value-format="yyyy-MM" type="month" style="width: 140px" placeholder="" @change="getAnbaoData" :clearable="false">
                  </el-date-picker>
                </div>
                <div>
                  <el-button type="text"  icon="el-icon-download" size="mini" @click="rowExportAnbao()">导出</el-button>
                </div>
              </div>
              <el-table stripe border :data="anbaoData" style="width: 100%" height="268px" max-height="268px">
                <el-table-column type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
                <el-table-column prop="big" label="考核大项"> </el-table-column>
                <el-table-column prop="total" label="扣分小计" width="100">
                  <template v-slot="{row}">
                    <span style="font-size: 16px;color: red;font-weight: bolder" v-if="row.total>0">{{row.total}}</span>
                    <span v-else>{{row.total}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </div>
        </div>
        <div class="container-left-middle">
          <div style="width: 49.5%">
            <el-card class="box-card">
              <div slot="header" class="card-title">
                <span>一区本年度维修次数统计</span>
                <div>
                  <el-date-picker v-model="leftYear" value-format="yyyy" type="year" style="width: 120px" placeholder="" @change="keepReportOne" :clearable="false">
                  </el-date-picker>
                </div>
              </div>
              <div>
                  <div class="protectionechart" id="protectionchart" :style="protectionChartStyle"></div>
              </div>
            </el-card>
          </div>
          <div style="width: 49.5%">
            <el-card class="box-card">
              <div slot="header" class="card-title">
                <span>二区本年度维修次数统计</span>
                <div>
                  <el-date-picker v-model="rightYear" value-format="yyyy" type="year" style="width: 120px" placeholder="" @change="keepReportTwo" :clearable="false">
                  </el-date-picker>
                </div>
              </div>
              <div class="Repairechart" id="Repairechart" :style="RepaireChartStyle"></div>
            </el-card>
          </div>
        </div>
      </div>
      <div class="container-right">
        <div class="container-right-buttom" style="margin-top: 0">
          <el-card>
            <div slot="header" class="clearfix">
              <span>实施项目列表</span>
            </div>
            <el-table stripe border :data="tableData" style="width: 100%" height="420px" max-height="420px">
              <el-table-column prop="name" label="项目名称" min-width="180"></el-table-column>
              <el-table-column prop="latestRecordTime" label="最新记录日期" width="120"> </el-table-column>
              <el-table-column prop="latestRecordContent" label="最新记录内容"> </el-table-column>
            </el-table>
          </el-card>
        </div>
        <div class="container-right-buttom">
          <el-card>
            <div slot="header" class="clearfix">
              <span>快到期合同列表</span>
            </div>
            <el-table stripe border :data="daoqiData" style="width: 100%" height="313px" max-height="313px">
              <el-table-column prop="contractId" label="合同编号" width="130"></el-table-column>
              <el-table-column prop="name" label="合同名称" > </el-table-column>
              <el-table-column prop="endTime" label="到期日期" width="120px"> </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
      </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {
  programBing,
  programData,
  listDaoQi,
  getLvhuaData as queryLvhuaData,
  getAnbaoData as queryAnbaoData,
  getBaojieData as queryBaojieData,
  keepReportOne, keepReportTwo, socialExamineGetScore
} from '../../api/shop/goods';
import {dataLine} from "@/api/home";
import moment from "moment/moment";
const changeDate = (value) => {
   const date = new Date(value);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
   const day = date.getDate();
   const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
  return formattedDate
}
export default {
  data() {
    return {
      protectionChartStyle: { width: "100%", height: "300px" },
      RepaireChartStyle: { width: "100%", height: "300px" },
      maintenanceeChartStyle: { width: "100%", height: "300px" },
      projectChartStyle: { width: "100%", height: "300px" },
      xData: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ], //横坐标
      yData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //数据
      shiyiyue: 12,
      shieryue: 15,
      tableData:[],
      daoqiData:[],
      lvhuaData:[],
      baojieData:[],
      anbaoData:[],
      checkingCnt:0,
      doingCnt:0,
      finishedCnt:0,
      keepReportOneData:{},
      keepReportTwoData:{},
      leftYear:'',
      rightYear:'',
      leftMonth:'',
      centerMonth:'',
      rightMonth:'',
      scoreData:'',
    };
  },
  created () {
    this.leftYear=moment().format('YYYY')
    this.rightYear=moment().format('YYYY')
    this.leftMonth=moment().format('YYYY-MM')
    this.centerMonth=moment().format('YYYY-MM')
    this.rightMonth=moment().format('YYYY-MM')
    this.getpProgramData();
    // this.getpProgramBing();
    this.getDaoQiData();
    this.getLvhuaData();
    this.getBaojieData();
    this.getAnbaoData();
    this.socialExamineGetScore()
  },
  mounted() {
    this.keepReportOne()
    this.keepReportTwo()
  },
  methods: {
    //最新考核分数
    socialExamineGetScore(){
      socialExamineGetScore().then(res=>{
        this.scoreData=res.data
      })
    },
    keepReportOne() {
      keepReportOne({searchDate:this.leftYear}).then((res) => {
        this.keepReportOneData = res.data
        this.protectioninitEcharts()
      })
    },
    keepReportTwo() {
      keepReportTwo({searchDate:this.rightYear}).then((res) => {
        this.keepReportTwoData = res.data
        this.RepairinitEcharts()
      })
    },
    indexMethod(index) {
      return index + 1;
    },
    async getLvhuaData(){
      const {rows} = await queryLvhuaData({searchDate:this.leftMonth})
      this.lvhuaData = rows.map((item) => {
        return{
          ...item,
        }
      })
      // console.log(res,'res');
    },
    async getBaojieData(){
      const {rows} = await queryBaojieData({searchDate:this.centerMonth})
      this.baojieData = rows.map((item) => {
        return{
          ...item,
        }
      })
      // console.log(res,'res');
    },
    async getAnbaoData(){
      const {rows} = await queryAnbaoData({searchDate:this.rightMonth})
      this.anbaoData = rows.map((item) => {
        return{
          ...item,
        }
      })
      // console.log(res,'res');
    },
    async getpProgramData(){
      const {rows} = await programData()
      this.tableData = rows.map((item) => {
        return{
          ...item,
          latestRecordTime:changeDate(item.latestRecordTime)
        }
      })
      // console.log(res,'res');
    },
    async getDaoQiData() {
      const {rows} = await listDaoQi();
      this.daoqiData = rows.map((item) => {
        return {
          ...item,
          endTime: changeDate(item.endTime)
        }
      })
      // console.log(res,'res');
    },
    // async getpProgramBing(){
    //   const {data:{checkingCnt,doingCnt,finishedCnt}} = await programBing()
    //        this.checkingCnt= checkingCnt
    //        this.doingCnt= doingCnt
    //        this.finishedCnt= finishedCnt
    // },
    protectioninitEcharts() {
      // 基本柱状图的颜色为红色
      const option = {
        xAxis: {
          type: "category",
          data: this.keepReportOneData.timeSeries,
        },
        yAxis: {},
        series: [
          {
            name: "消费人数",
            type: "bar", //形状为柱状图
            itemStyle: {
              width: "200px",
              color:'#0091ff'
            },
            barWidth: "50%",
            data: this.keepReportOneData.dataReport,
            label: {
              show: true,
              formatter: '{c}',
              position:'top'
            },
          },
        ],
        // label: {
        //   show: true,
        //   formatter: '{c}'
        // },
        grid: {
          top: 20,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(document.getElementById("protectionchart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    RepairinitEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          type: "category",
          data: this.keepReportTwoData.timeSeries,
        },
        yAxis: {},
        series: [
          {
            name: "消费人数",
            type: "bar", //形状为柱状图
            itemStyle: {
              width: "200px",
              color: "#eac344",
            },
            barWidth: "50%",
            data: this.keepReportTwoData.dataReport,
            label: {
              show: true,
              formatter: '{c}',
              position:'top'
            },
          },
        ],
        grid: {
          top: 20,
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
      };
      const myChart = echarts.init(document.getElementById("Repairechart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    //行导出
    rowExportAnbao(row){
      this.$router.push({
        path:'/jmreport/anbao',
        query:{
          id:'910052379437346816',
          sysDateTime:this.rightMonth
        }
      })
    },
    rowExportLvhua(row){
      this.$router.push({
        path:'/jmreport/lvhua',
        query:{
          id:'910056624869912576',
          sysDateTime:this.leftMonth
        }
      })
    },
  },
};
</script>


<style lang="scss" scoped>
.container {
  display: flex;
  .container-left {
    width: 60%;
    .consumption {
      display: flex;

      .consumption-item {
        width: 33%;
        display: flex;
        align-items: center;
        .consumption-item-img {
          width: 47px;
          margin-right: 15px;
        }
        .consumption-item-title {
          font-size: 10px;
          color: #746060;
        }
        .consumption-item-number {
          font-size: 20px;
        }
      }
    }
    .container-left-middle {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
    }
    .container-left-buttom {
      margin-top: 10px;
      &-box {
        display: flex;
        &-left {
          width: 35%;
          &-top {
            background-color: #ccc;
            width: 100%;
            &-number {
              text-align: center;
              height: 80px;
              color: red;
              font-size: 30px;
              line-height: 100px;
              // margin: 0 auto;
            }
            &-text {
              font-size: 14px;
              text-align: center;
              padding-bottom: 5px;
            }
          }
          &-buttom {
            margin-top: 10px;
            background-color: #ccc;
          }
        }
        &-right {
          width: 60%;
          margin-left: 10px;
        }
      }
    }
  }
  .container-right {
    margin-left: 10px;
    width: 40%;
    &-top {
      &-header {
        display: flex;
        justify-content: space-around;

        &-box {
          border: 1px #ccc solid;
          border-radius: 8px;
          padding: 10px 10px 10px 15px;
        }
        &-text {
          font-size: 13px;
          color: #ccc;
        }
        &-number {
          font-size: 30px;
        }
      }
    }
    &-buttom {
      margin-top: 10px;
    }
  }
}
.card-title{
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
}
</style>
